
<template>
    <div >
       <div class="inputWrapper" @click.stop="showOptions = !showOptions">
            <span class="depth" >{{currentData}}</span>
              <i class="arrow"></i>
        </div>
            <div class="opt-wapper">
                <ul class="options" v-show="showOptions" v-clickOut="test"> 
                    <li v-for="(item, index) in value" :key="index"  @click.stop="choose(item,index)" >{{item.data}}</li>
                </ul>
            </div>
    </div>
</template>
<script>
    import {mapMutations, mapActions} from 'vuex';
  export default{
      props:{
          value:'',
          accuracy:''
      },
      data(){
        return{
             showOptions: false,
             currentOption:0,
             currentData:""
        }
      },
      //渲染到页面的时候
      mounted () {
          this.currentData=this.value[this.accuracy-1].data;
                     if(this.$store.state.filter==1){
              this.currentData=this.value[0].data
           }else if(this.$store.state.filter==2){
                this.currentData=this.value[1].data
           }else if(this.$store.state.filter==3){
           this.currentData=this.value[2].data
           }else if(this.$store.state.filter==4){
               this.currentData=this.value[3].data
           }
      },
      methods: {
           ...mapMutations([
                'SET_FILTER'
            ]),
          test(){
              this.showOptions=false;
          },
          choose(item,index){
              this.currentOption=index;
                this.showOptions=false;
                this.currentData=item.data;
              this.SET_FILTER({filter:item.index});
             this.$emit('func',index);
          }
      },
      computed:{
      
      },
      directives : {
  clickOut: {
    bind: function(el, binding) {
         let  self=this;
      function handler(e) {
       if (el.contains(el.target)) return false
       if (binding.expression) {
        binding.value()
       }
      }
      el.handler = handler
      document.addEventListener('click', el.handler)
    },
    unbind: function(el) {
      document.removeEventListener('click', el.handler)
    }    
  }
}
  }
</script>
<style>
    .options{
        width: 100%;
        color: #fff;
        font-size: 24px;
        color: #596a7a;
    background-color: #fff!important;
    border-radius: 2px;
    }
    .inputWrapper{
        height: 60px;
            display: flex;
    align-items: center;
    }
    .depth{
        height:60px;
    line-height: 60px;
    border:1px solid rgba(134,134,192,1);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    width: 200px;
    color: #ADADD8;
    text-align: center;
    }
    .opt-wapper{
    position: absolute;
    width: 200px;
        -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.3);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    padding: 4px 0;
    z-index: 1000;
    }
    .opt-wapper li:hover{
        color: #357ce1!important;
    background-color: rgba(229,235,245,.5)!important
    }
    .opt-wapper li{
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    cursor: pointer;
    }
   .arrow {
    left: -40px;
    top: -4px;
    position: relative
}

 .arrow:before {
    content: "";
    position: absolute
}

 .arrow:before {
    top: 0;
    left: 0;
    border-top: 10px solid #c5cfd5;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.arrow:after {
    border-top: 0 solid transparent;
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    top: 0;
    left: 10px
}
</style>


